<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度下拉列表</title>
    <style>
        ul li.gray{
            background-color: grey;
        }
    </style>
</head>
<body>
    <div id="box">
        <input type="text" placeholder="请输入关键字" @keyDown="searchLi($event)" v-model="t1" @keyDown.down="changeDown()" @keydown.up.prevent="changeUp()">
        <ul>
            <li v-for="(item,index) in myData" :class="{gray:index==now}">{{item.title}}</li>
        </ul>
        <p v-show="myData.length==0">暂时没有数据。。。</p>
    </div>
    <script src="../vue.js"></script>
    <script src="../vue-resource.js"></script>
    <script>
        window.onload = function(){
            new Vue({
                el:"#box",
                data:{
                    myData:[],
                    t1:'',
                    now:-1
                },
                methods:{
                    searchLi:function(ev){
//                        判断当按上键和下键不发请求 判断keyCode
                        if(ev.keyCode == 38 || ev.keyCode == 40)return;
                        if(ev.keyCode == 13){
                            window.open("https://www.baidu.com/s?wd="+this.t1);
                            this.t1 = "";
                        }
                        this.$http.get("baidu.json").then(function (res) {
                            this.myData = res.data.content;
                        },function (res) {
                            console.log(res.data);
                        })
                    },
                    changeDown:function () {
                        this.now++;
                        console.log(this.now)
                        console.log(this.myData.length)
                        if(this.now == this.myData.length){
                            this.now = -1;
                        }
                        this.t1 = this.myData[this.now].title;
//                        console.log(this.myData[this.now].title);
                    },
                    changeUp:function () {
                        this.now--;
                        console.log(this.now);
                        if(this.now == -1){
                            this.now = this.myData.length;
                        }
                    }
                }



            })
        }
    </script>
</body>
</html>